<template>
  <div>
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
    />
    <div class="avatar">
      <van-image fit="cover" round :src="userInfo.photo" />
      <van-uploader :after-read="afterRead"/>
    </div>
    <van-cell-group>
      <van-cell title="昵称" :value="userInfo.name" @click="ShowNick" is-link/>
      <van-cell title="性别" :value="userInfo.gender === 0?'男':'女' " @click="isShowGender = true" is-link/>
      <van-cell title="生日" :value="userInfo.birthday" @click="ShowBirthday" is-link/>
    </van-cell-group>
    <van-dialog v-model="show" title="标题" show-cancel-button @cancel="show = false" @confirm="uploadNickName">
      <van-field v-model="nickName" ref="focus"/>
    </van-dialog>
    <van-popup v-model="isShowGender" position="bottom">
      <van-nav-bar title="修改性别" left-text="取消" @click-left="isShowGender = false"/>
      <van-cell-group>
        <van-cell title="男" @click="uploadGender(0)" is-link/>
        <van-cell title="女" @click="uploadGender(1)" is-link/>
      </van-cell-group>
    </van-popup>
    <van-datetime-picker
      v-if="isShowBirthday"
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
      @cancel="isShowBirthday = false"
      @confirm="uploadBirthday"
    />
    <div class="mask" v-if="isShowMask">
      <vueCropper
        ref="cropper"
        :img="img"
        autoCrop
        fixed
        canMoveBox
        centerBox
        autoCropWidth="120px"
        autoCropHeight="120px"
      ></vueCropper>
      <van-button type="primary" @click="crop">裁剪</van-button>
      <van-button class="cancel" type="primary" @click="isShowMask = false">取消</van-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { uploadInfo, uploaderPhoto } from '@/api/user'
import moment from 'moment'
import { VueCropper } from 'vue-cropper'
export default {
  name: 'Edit',
  computed: {
    ...mapState('user', ['userInfo'])
  },
  created () {
    this.$store.dispatch('user/getUserInfo')
  },
  data () {
    return {
      show: false,
      nickName: '',
      isShowGender: false,
      currentDate: '',
      isShowBirthday: false,
      minDate: new Date('1921-01-01'),
      maxDate: new Date(),
      isShowMask: false,
      img: ''
    }
  },
  methods: {
    ShowNick () {
      this.show = true
      this.nickName = this.userInfo.name
      this.$nextTick(() => {
        this.$refs.focus.focus()
      })
    },
    async uploadNickName () {
      await uploadInfo({
        name: this.nickName
      })
      this.$toast.success('修改昵称成功')
      this.$store.dispatch('user/getUserInfo')
    },
    async uploadGender (data) {
      await uploadInfo({
        gender: data
      })
      this.$store.dispatch('user/getUserInfo')
      this.$toast.success('修改性别成功')
      this.isShowGender = false
    },
    ShowBirthday () {
      this.isShowBirthday = true
      this.currentDate = new Date(this.userInfo.birthday)
    },
    async uploadBirthday () {
      await uploadInfo({
        birthday: moment(this.currentDate).format('YYYY-MM-DD')
      })
      this.$toast.success('修改生日成功')
      this.$store.dispatch('user/getUserInfo')
      this.isShowBirthday = false
    },
    async afterRead (file) {
      // 此时可以自行将文件上传至服务器
      // const fd = new FormData()
      // fd.append('photo', file.file)
      // await uploaderPhoto(fd)
      // this.$toast.success('修改图片成功')
      // this.$store.dispatch('user/getUserInfo')
      this.img = file.content
      this.isShowMask = true
    },
    crop () {
      this.$refs.cropper.getCropBlob(async data => {
        const fd = new FormData()
        fd.append('photo', data)
        await uploaderPhoto(fd)
        this.$toast.success('修改图片成功')
        this.$store.dispatch('user/getUserInfo')
        this.isShowMask = false
      })
    }
  },
  components: {
    VueCropper
  }
}
</script>

<style lang="less" scoped>
.avatar {
  padding: 20px 0;
  text-align: center;
  .van-image {
    width: 120px;
    height: 120px;
  }
  .van-uploader{
    position: absolute;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    opacity: 0;
    ::v-deep{
      .van-uploader__input{
        display: inline-block;
        width: 120px;
        height: 120px;
      }
    }
  }
}
.van-field{
  border: 1px solid #ccc;
}
::v-deep{
  .van-dialog__content{
    padding: 10px;
  }
  .van-nav-bar__text{
    color: #fff;
  }
}
.mask {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  .van-button {
    position: absolute;
    top: 0;
    z-index: 1;
  }
  .cancel {
    right: 0;
  }

}
</style>
